<template>
	<view class="scene-timing-wrap">
		<view class="container-wrap">
			<view class="form-item-wrap">
				<u-radio-group v-model='radioValue' placement="column">
					<view style="padding:20rpx 0"><u-radio :name="1" :label="1">
							{{$tt('cron.week.903494-0')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
							{{$tt('cron.week.903494-1')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-row><u-radio :name="3" :label="3">
								{{$tt('cron.week.903494-2')}}
							</u-radio>
							<uni-data-select v-model="cycle01" :localdata="weekList" :clear="false"
								style="margin:0 15rpx;width:150rpx;"></uni-data-select>-
							<uni-data-select v-model="cycle02" :localdata="weekList" :clear="false"
								style="margin-left:15rpx;width:150rpx;"></uni-data-select>
						</u-row>
					</view>
					<view style="padding:20rpx 0"><u-row><u-radio :name="4" :label="4"
								style="padding: 20rpx 10rpx;position: relative;">
								{{$tt('cron.week.903494-3')}}
								<u-input v-model='average01' :min="1" :max="4" type="number" :maxlength="1"
									:customStyle="{ margin: '0 15rpx',width:'100rpx' }" @input="checkValue"  />
								{{$tt('cron.week.903494-4')}}
							</u-radio>
							<uni-data-select v-model="average02" :localdata="weekList" :clear="false"
								style="position: relative;margin-left:15rpx;width:150rpx;"></uni-data-select>
						</u-row>
					</view>
					<view style="padding:20rpx 0">
						<u-row><u-radio :name="5" :label="5">
								{{$tt('cron.week.903494-5')}}
							</u-radio>
							<uni-data-select v-model="weekday" :localdata="weekList" :clear="false"
								style="margin-left:15rpx;width:150rpx;"></uni-data-select>
						</u-row>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="6" :label="6">
							{{$tt('cron.week.903494-6')}}
							<view style="margin-right: 15rpx;"></view>
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')" inputAlign="right"
								disabledColor="#fff" disabled :customStyle="{ marginRight: '15rpx' }">
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')"
									inputAlign="right" disabledColor="#fff" disabled
									:customStyle="{ marginRight: '15rpx' }">
								</u--input>
								<!-- #endif -->
								<!-- #endif -->
								<template slot="suffix">
									<u-icon name="arrow-down" @click="isRepeat = true"></u-icon>
								</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="other">
			<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
				@close="isRepeat = false">
				<view class="repeat-popup-wrap">
					<view class="nav">
						<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
						<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
					</view>
					<view class="radio-group-wrap">
						<u-checkbox-group v-model="selectValues" :borderBottom="false" placement="column"
							iconPlacement="right">
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.monday')" :name="1" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.tuesday')" :name="2" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.wednesday')" :name="3" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.thursday')" :name="4" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.friday')" :name="5" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.saturday')" :name="6" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.sunday')" :name="7" iconSize="16"></u-checkbox>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: 2,
				weekday: 2,
				cycle01: 2,
				cycle02: 3,
				average01: 1,
				average02: 2,
				checkboxList: [],
				selectValue: '',
				selectValues: [],
				isRepeat: false,
				checkNum: this.$options.propsData.check,
				weekList: [{
						value: 2,
						text: '星期一'
					},
					{
						value: 3,
						text: '星期二'
					},
					{
						value: 4,
						text: '星期三'
					},
					{
						value: 5,
						text: '星期四'
					},
					{
						value: 6,
						text: '星期五'
					},
					{
						value: 7,
						text: '星期六'
					},
					{
						value: 1,
						text: '星期日'
					}
				],
			}
		},
		name: 'crontab-week',
		props: ['check', 'cron'],
		methods: {
			// 单选按钮值变化时
			radioChange() {
				if (this.radioValue !== 2 && this.cron.day !== '?') {
					this.$emit('update', 'day', '?', 'week');
				}
				switch (this.radioValue) {
					case 1:
						this.$emit('update', 'week', '*');
						break;
					case 2:
						this.$emit('update', 'week', '?');
						break;
					case 3:
						this.$emit('update', 'week', this.cycleTotal);
						break;
					case 4:
						this.$emit('update', 'week', this.averageTotal);
						break;
					case 5:
						this.$emit('update', 'week', this.weekdayCheck + 'L');
						break;
					case 6:
						this.$emit('update', 'week', this.checkboxString);
						break;
				}
			},

			// 周期两个值变化时
			cycleChange() {
				if (this.radioValue == '3') {
					this.$emit('update', 'week', this.cycleTotal);
				}
			},
			// 平均两个值变化时
			averageChange() {
				if (this.radioValue == '4') {
					this.$emit('update', 'week', this.averageTotal);
				}
			},
			// 最近工作日值变化时
			weekdayChange() {
				if (this.radioValue == '5') {
					this.$emit('update', 'week', this.weekday + 'L');
				}
			},
			// checkbox值变化时
			checkboxChange() {
				if (this.radioValue == '6') {
					this.$emit('update', 'week', this.checkboxString);
				}
			},
			//检查输入
			checkValue(event) {
				const value = Number(event);  
				if (value < 1) {
					this.average01 = 1;
				} else if (value > 4) {
					this.average01 = 4;
				} else {
					this.average01 = value;   
				}
			},
			handleRepeatConfirm() {
				this.selectValue = this.getRepeatName(this.selectValues);
				// this.selectValue = this.checkboxList.join(', ');
				console.log(this.selectValue, 'll');
				this.isRepeat = false;
			},
			// 获取repeat名称
			getRepeatName(selectValues) {
				const list = selectValues.map(item => {
					if (item === 1) {
						return this.$tt('sceneTiming.monday')
					} else if (item === 2) {
						return this.$tt('sceneTiming.tuesday')
					} else if (item === 3) {
						return this.$tt('sceneTiming.wednesday')
					} else if (item === 4) {
						return this.$tt('sceneTiming.thursday')
					} else if (item === 5) {
						return this.$tt('sceneTiming.friday')
					} else if (item === 6) {
						return this.$tt('sceneTiming.saturday')
					} else if (item === 7) {
						return this.$tt('sceneTiming.sunday')
					}
				})
				if (list.length === 7) {
					return this.$tt('sceneTiming.everyDay');
				} else {
					return list.join(',');
				}
			},
		},
		watch: {
			'radioValue': 'radioChange',
			'cycleTotal': 'cycleChange',
			'averageTotal': 'averageChange',
			'weekdayCheck': 'weekdayChange',
			'checkboxString': 'checkboxChange',
		},
		computed: {
			// 计算两个周期值
			cycleTotal: function() {
				this.cycle01 = this.checkNum(this.cycle01, 1, 7)
				this.cycle02 = this.checkNum(this.cycle02, 1, 7)
				return this.cycle01 + '-' + this.cycle02;
			},
			// 计算平均用到的值
			averageTotal: function() {
				this.average01 = this.checkNum(this.average01, 1, 4)
				this.average02 = this.checkNum(this.average02, 1, 7)
				return this.average02 + '#' + this.average01;
			},
			// 最近的工作日（格式）
			weekdayCheck: function() {
				this.weekday = this.checkNum(this.weekday, 1, 7)
				return this.weekday;
			},
			// 计算勾选的checkbox值合集
			checkboxString: function() {
				const str = this.selectValues.map(val => {
					return val + 1 > 7 ? 1 : val + 1;
				}).join();
				return str == '' ? '*' : str;
			}
		}
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.scene-timing-wrap {

		.container-wrap {
			.form-wrap {
				background: #fff;
				border-radius: 10rpx;

				.form-item-wrap {
					font-size: 14px;
				}
			}

			.btn-wrap {
				margin: 30rpx 26rpx;
			}
		}

		.other {
			.repeat-popup-wrap {
				padding: 30rpx;

				.nav {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					margin-bottom: 34rpx;
				}

				.radio-group-wrap {
					background-color: #fff;
					border-radius: 10rpx;

					.radio-wrap {
						padding: 32rpx;

						&:not(:last-child) {
							border-bottom: 1rpx solid #F1F2F5;
						}
					}
				}
			}
		}
	}
</style>